<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>图标选择</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/stv/admin/layui/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/stv/admin/layui/layuiadmin/style/admin.css" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
    </script>
    <script src="/static/stv/admin/layui/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/admin/' //静态资源所在路径
            , version: '1.0.0' + Math.random()
        }).extend({
            index: 'lib/index' //主入口模块
        });
        layui.use(['layer', 'jquery', 'form'], function (args) {
            var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , form = layui.form
                , layer = layui.layer
            ;
            var parent_layer_index = parent.layer.getFrameIndex(window.name);//获取窗口索引
            $('i').each(function (index, element) {
                $(this).click(function () {
                    if ($(this).prop('class').indexOf('layui-icon') > -1) {
                        try {
                            parent.set_icon_css($(this).prop('class'));
                        } catch (e) {
                        }
                        parent.layer.close(parent_layer_index);
                    }
                });
            })

        });
    </script>
    <script src="/static/stv/admin/js/admin.common.js"></script>
</head>

<style>
    .content {
        background: #eee;
    }

    .content div {
        float: left;
        padding: 5px;
        width: 60px;
        height: 60px;
        border: 1px solid #999;
        border-radius: 5px;
        transition: 0.5s;
        box-sizing: border-box;
        margin: 0 8px 8px 0;
    }

    .content i {
        font-size: 22px;
        display: block;
        line-height: 50px;
        text-align: center;
        transition: 0.5s;
    }

    .content i:hover {
        font-size: 28px;
        color: red;
    }

</style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="content" id="content">


                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
</div>

<script>
    function getstyle() {
        var str = "";
        for (var i = 0; i < document.styleSheets.length; i++) {
            var rules;
            if (document.styleSheets[i].cssRules) {
                rules = document.styleSheets[i].cssRules;
            }
            else {
                rules = document.styleSheets[i].rules;
            }

            for (var j = 0; j < rules.length; j++) {
                //alert(1);
                css = rules[j].selectorText;
                try {
                    if (css != undefined && css.indexOf('layui-icon-') > 0 && css.indexOf('::before') > 0) {

                        //document.write(css + css.indexOf('layui-icon-') + "<br />");

                        css = (css.replace('::before', '').replace('.', ''));
                        str += "<div><i class='layui-icon " + css + "'></i></div>";
                    }
                } catch (e) {
                    console.log(rules[j]);
                    console.log(e);
                }
            }
        }
        document.getElementById('content').innerHTML = str;
    }

    getstyle();
</script>
</body>
</html>